<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- .stop -->
    <div @click="divClick" :style="{height:'100px', width:'100px', backgroundColor:'yellow'}">
      <button @click.stop="btnClick">点我</button>
    </div>
    <!-- .prevent -->
    <div>
      <a href="https://www.niit.edu.cn" @click.prevent="goSchool">去学校</a>
    </div>
    <!-- .once -->
    <div>
      <button @click.once="onceClick">我只会触发一次</button>
    </div>
    <!-- 按键别名 -->
    <div>
      <input type="number" placeholder="请输入手机号，按回车后 提交" @keyup.enter="inputPhone">
    </div>
  </div>
  <script src="./assets/js/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: "Hello",
          password: '1234'
        }
      }, methods: {
        btnClick() {
          console.log("button click")
        },
        divClick() {
          console.log("div click")
        },
        goSchool() {
          console.log("go to school")
          if (this.password === '1234') {
            window.location.href = 'https://www.niit.edu.cn'
          } else {
            window.location.href = 'https://www.baidu.com'
          }
        },
        onceClick() {
          console.log("我触发...")
        },
        inputPhone() {
          console.log('提交手机号')
        },
        rightClick() {
          console.log('右键触发')
        }
      }
    })
    app.mount("#app")
  </script>
</body>

</html>